<div class="findtrs">
	<div class="ftitle">
		<div class="lt">
			<h2>交易记录</h2>
		</div>
	</div>

	<div class="funaduibi fbai qmbox1">
		<div class="form">
			<form action="" method="post">
				<ul class="clearfix">
					<li>
						<label>时间</label>
						<div class="bt">
							<input class="t1 t2" type="text" id="test1" value="" placeholder="开始日期"/>
							<span><img src="__STATIC__/lib/index/images/qm18.png" ></span>
							<input class="t1 t2" type="text" id="test2" value="" placeholder="结束日期"/>
						</div>
					</li>
					<li style="width: 180px;padding-left: 5px;">
						<label>类型</label>
						<select class="lsele" name="tran_status" id="tran_status">
							<option value="">请选择交易类型</option>
							{foreach $tran_type as $v_d}
							<option value="{$v_d}">{$v_d}</option>
							{/foreach}
						</select>
					</li>
					<li style="width: 220px;">
						<label>拒付原因</label>
						<select class="lsele" name="desc" id="desc">
							<option value="">请选择拒付原因</option>
							<option value="1">卡片过期时间错误，请输入正确的过期时间</option>
							<option value="2">高风险，已拒绝</option>
							<option value="3">卡片可用余额不足，请先充值</option>
							<option value="4">请输入正确的 CVV</option>
							<option value="5">未知错误，请联系客服</option>
							<option value="6">卡片未激活，请先激活卡片</option>
							<option value="7">该卡不能在美国地区以外消费</option>
						</select>
					</li>
					<li style="width: 220px;">
						<label>卡号</label>
						<input style="width: 200px;" class="t1" type="text" id="card_num" value="" placeholder="请输入卡号"/>
					</li>

					<li>
						<div class="btn">
							<a href="#" class="b1 on" lay-submit lay-filter="*"><span>查询</span></a>
						</div>
					</li>
				</ul>
			</form>
		</div>
	</div>


	<div class="funaduibi fbai">
		<div class="fdbtable qmfdbtable" >
			<table border="0" cellspacing="0" cellpadding="0" width="100%" id="dataTable" >
			</table>
		</div>
	</div>

</div>
<script type="text/javascript">
	layui.use(['form', 'laydate', 'table',], function () {
		var laydate = layui.laydate,
				form = layui.form,
				table = layui.table; //表格

		//执行一个laydate实例
		laydate.render({
			elem: '#test1' //指定元素
		});
		laydate.render({
			elem: '#test2' //指定元素
		});
		table.render({
			elem: '#dataTable',
			height: 'auto',
			cellMinWidth: '80',
			totalRow: true,
			method: 'post',
			url: "{:url('cards/tranList123')}",
			id: 'dataTable',
			toolbar: '#toolbar',
			defaultToolbar: ['filter', 'exports'],
			text:{none: 'No Data'},
			error: function(){
				setTimeout("window.location.href='" + "{:url('index/index')}" + "'; ", 1000);
			},
			cols: [[
				{ type: 'numbers'},
				{ field: 'card_num', title: '卡号',width: 200,align:"left"},
				{ field: 'type',  align: 'left', title: '交易状态',width: 130,
					templet:function (d) {
						var tran_status 	= d.tran_status;
						const flag 			= d.reversal_flag;
						var color = '';
						if(tran_status == 'Declined'){
							color = 'red';
						}else if(tran_status == 'Posted'){
							color = 'green';
						}else if(tran_status == 'Authorized'){
							color = 'gray';
							if(flag == 'Y'){
								tran_status = 'Reversal';
							}
						}else if(tran_status == 'Credit'){
							color = '#00aeef';
						}
						return "<span style='color:" + color + ";font-weight:bold'>" + tran_status + "</span>"
					},
					totalRowText:'Total Amount:'},
				{ field: 'desc',  align: 'right', title: '拒付原因',
					templet:function (d) {
						const desc = d.desc;
						if(desc == 'EXPIRATION DATE ERROR' || desc == 'VERIFY EXPIRATION DATE OR USE NEW CARD'){
							return '卡片过期时间错误，请输入正确的过期时间';
						}else if(desc == 'ORIGINAL TRANSACTION NOT FOUND' || desc == 'CALL CUSTOMER SERVICE'){
							return '--';
						}else if(desc == 'ENHANCED RISK MONITORING DECLINE'){
							return '高风险，已拒绝';
						}else if(desc == 'TRANSACTION AMOUNT LIMIT EXCEEDED'
								|| desc == 'VERIFY AMOUNT AND ADJUST LIMIT'
								|| desc == 'No sufficient funds'
						){
							return '卡片可用余额不足，请先充值';
						}else if(desc == 'VERIFY CVC2 NUMBER ON BACK OF CARD'){
							return '请输入正确的 CVV';
						}else if(desc == 'CALL CUSTOMER SERVICE' || desc == 'CALL THE NUMBER ON THE BACK OF THE CARD'){
							return '未知错误，请联系客服';
						}else if(desc == 'CARD IS NOT ACTIVE' || desc == 'VERIFY CARD STATUS AND ACTIVATE CARD'){
							return '卡片未激活，请先激活卡片';
						}else if(desc == 'INT\'L PURCHASES NOT ALLOWED' || desc == 'FLAG INTERNATIONAL ON CUST F6/05'){
							return '该卡不能在美国地区以外消费';
						}else if(desc == "CALL CREDIT DEPARTMENT"){
							return '银行例行维护';
						}else if(desc == "ENABLE ALERTS & NOTIFICATIONS"){
							return '交易高风险被银行拒绝';
						}else{
							return desc;
						}
					}
				},
				{ field: 'shopping',  align: 'left', title: '商家'},
				{ field: 'amount_auth',  align: 'left', title: '预扣款($)',width: 150,
					style:'color:#FF5722;font-weight:bold',totalRow: true},
				{ field: 'ctime', align: 'left', title: '交易时间',width: 180,},
				{ field: 'amount_post',  align: 'left', title: '实际扣款($)',width: 150,
					style:'color:#FF5722;font-weight:bold',totalRow: true,
					templet:function (d) {
						var show_amount 	= d.amount_post;
						var color           = '#FF5722';
						return "<span style='color: " + color + ";font-weight:bold'>" + show_amount + "</span>"
					}
				},
				{ field: 'utime', align: 'left', title: '结算时间',width: 180,
					templet: function (d) {
						const utime = d.utime;
						if(utime != undefined){
							return utime;
						}else{
							return '--';
						}
					}
				},
				{ field: 'currencyCode',  align: 'left', title: '币种'},
				{ field: 'country',  align: 'left', title: '交易发生地'},
			]],
			page: true,
			limit: 10,
			limits: [10 , 100 , 1000 , 5000 , 10000],
		});
		form.on('submit(*)', function (data) {
			layui.table.reload('dataTable', {
				where: {desc:$("#desc").val(),
					tran_status:$("#tran_status").val(),
					card_num:$("#card_num").val(),
					stime:$("#test1").val(),
					ltime:$("#test2").val()}
				, page: {
					curr: 1 //重新从第 1 页开始
				}
			});
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	});
</script>